<!--
 * @Descripttion:节点管理-概览
 * @Author: liujing
 * @Date: 2021-07-19 18:44:58
 * @LastEditTime: 2021-09-17 20:49:38
-->
<template>
  <div class="contain">
    <div class="search">
      <div class="box">
        <input
          type="text"
          placeholder="输入节点名、节点类型查询"
          class="searchInput"
        />
        <button class="searchBtn"></button>
      </div>
    </div>
    <div class="content">
      <div class="tableOne">
        <el-table
          :data="nodeTableData"
          style="width: 100%"
          class="tableOne"
          stripe
          :header-row-style="headerStyle"
        >
          <el-table-column label="Node节点列表">
            <el-table-column
              type="index"
              label="序号"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="nodeName"
              label="节点名称"
              min-width="100"
              align="center"
            >
            </el-table-column>
<!--            <el-table-column-->
<!--              prop="nodeType"-->
<!--              label="节点类型"-->
<!--              min-width="120"-->
<!--              align="center"-->
<!--            >-->
<!--              <templete slot-scope="scope">-->
<!--                <p v-if="(scope.row.nodeType != 1) & (scope.row.nodeType != 2)">-->
<!--                  node节点-->
<!--                </p>-->
<!--                <p />-->
<!--              </templete>-->
<!--            </el-table-column>-->
            <el-table-column
              prop="nodeAddress"
              label="节点地址"
              min-width="150"
              align="center"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>

      <div class="tableTwo">
        <el-table
          :data="consenterTableData"
          style="width: 100%"
          class="tableOne"
          stripe
          :header-row-style="headerStyle"
        >
          <el-table-column label="consenter节点列表">
            <el-table-column
              type="index"
              label="序号"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="nodeName"
              label="节点名称"
              min-width="120"
              align="center"
            >
            </el-table-column>
<!--            <el-table-column-->
<!--              prop="nodeType"-->
<!--              label="节点类型"-->
<!--              min-width="120"-->
<!--              align="center"-->
<!--            >-->
<!--            </el-table-column>-->
            <el-table-column
              prop="nodeAddress"
              label="节点地址"
              min-width="150"
              align="center"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>

      <div class="tableThree">
        <el-table
          :data="ipfsTableData"
          style="width: 100%"
          class="tableOne"
          stripe
          :header-row-style="headerStyle"
        >
          <el-table-column label="ipfs节点列表">
            <el-table-column
              type="index"
              label="序号"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="nodeName"
              label="节点名称"
              min-width="120"
              align="center"
            >
            </el-table-column>
<!--            <el-table-column-->
<!--              prop="nodeType"-->
<!--              label="节点类型"-->
<!--              min-width="120"-->
<!--              align="center"-->
<!--            >-->
<!--            </el-table-column>-->
            <el-table-column
              prop="nodeAddress"
              label="节点地址"
              min-width="150"
              align="center"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Ajax from '../../apis/ajax'
export default {
  name: '',
  data () {
    return {
      nodeTableData: [],
      consenterTableData: [],
      ipfsTableData: []
    }
  },
  mounted () {
    this.getNodeInfo()
    this.getConsenterInfo()
    this.getIpfsInfo()
  },
  methods: {
    headerStyle () {
      return 'background:#b19577;fontSize:15px'
    },
    // 获取Node节点列表信息
    getNodeInfo () {
      return Ajax({
        url: '/node/allnode',
        method: 'GET'
      })
        .then(resData => {
          // eslint-disable-next-line eqeqeq
          if (resData.code == 200) {
            this.nodeTableData = resData.data
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(error => {})
    },
    // 获取consenter节点列表信息
    getConsenterInfo () {
      return Ajax({
        url: '/node/allnode',
        method: 'GET'
      })
        .then(resData => {
          // eslint-disable-next-line eqeqeq
          if (resData.code == 200) {
            this.consenterTableData = resData.data
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(error => {})
    },
    // 获取ipfs节点列表信息
    getIpfsInfo () {
      return Ajax({
        url: '/node/allnode',
        method: 'GET'
      })
        .then(resData => {
          // eslint-disable-next-line eqeqeq
          if (resData.code == 200) {
            this.ipfsTableData = resData.data
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(error => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  .search {
    height: 80px;
    background-color: #fff;
    .box {
      width: 90%;
      height: 40px;
      margin: 0 auto;
      padding-top: 40px;
      display: flex;
      align-items: center;
      .searchInput {
        width: 90%;
        height: 40px;
        border: 1px solid #b19577;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        padding-left: 10px;
      }
      .searchBtn {
        width: 10%;
        height: 40px;
        border: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background: url(../../images/search.png) no-repeat center center;
        background-color: #b19577;
        background-size: 25px;
      }
    }
  }
  .content {
    height: 800px;
    background: #fff;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;

    .tableOne {
      width: 600px;
      // margin-left: 10px;
      margin-top: -30px;
    }
    .tableTwo {
      width: 600px;
      margin-top: -30px;
    }
    .tableThree {
      width: 600px;
      margin-top: -10px;
    }
  }
}
</style>
